/**
在 React 中，路由是管理应用程序中不同视图和组件的一种方式。React Router 是一个流行的库，用于在 React 应用中实现路由功能。
1. 基本概念
- 路由：路由是指根据 URL 的不同，渲染不同的组件或视图。它允许用户在应用中导航而不重新加载页面。
- React Router：React Router 是一个用于在 React 应用中实现路由的库，提供了简单的 API 来定义和管理路由。

2. 核心组件
React Router 提供了一些核心组件，用于定义路由和导航：
- BrowserRouter：用于包装整个应用，使用 HTML5 的历史 API 来保持 UI 和 URL 的同步。
- Route：用于定义路径和要渲染的组件。可以根据 URL 的变化动态渲染不同的组件。
- Switch：用于包裹多个 Route，确保一次只渲染一个 Route。它会根据匹配的顺序渲染第一个匹配的 Route。
- Link：用于创建导航链接，替代传统的  `<a>`  标签，避免页面重新加载。
- NavLink：类似于 Link，但支持样式的激活状态，方便实现导航菜单的高亮效果。

3. 使用示例
以下是一个简单的 React Router 使用示例：
jsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
// 定义一些组件
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const NotFound = () => <h2>404 Not Found</h2>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} /> 404 页面
        </Switch>
        </Router>
      );
    };
    
    export default App;
    4. 路由参数
    React Router 还支持在 URL 中传递参数。例如：
    jsx
    <Route path="/user/:id" component={User} />
    在上面的示例中， `:id`  是一个路由参数，可以在  `User`  组件中通过  `props.match.params.id`  访问。
    
    5. 总结
    React Router 是一个强大的路由库，允许开发者在 React 应用中实现灵活的路由管理。通过使用核心组件如  `BrowserRouter` 、 `Route`  和  `Link` ，可以轻松地定义和管理不同的视图和导航。路由参数和嵌套路由等功能使得 React Router 能够处理复杂的路由需求，提供良好的用户体验。
 */
import React, { PureComponent } from "react";
import {
  NavLink,
  Link,
  Navigate,
  Routes,
  Route,
  useRoutes,
  useNavigate,
} from "react-router-dom";

// import { withRouter } from './hoc'
// import Home from './pages/home'
// import HomeRecommend from './pages/home/HomeRecommend'
// import HomeRanking from './pages/home/HomeRanking'
// import HomeSongMenu from './pages/home/HomeSongMenu'
// import About from './pages/about'
// import Detail from './pages/detail'
// import Login from './pages/login'
// import Category from './pages/category'
// import Order from './pages/order'
// import NotFound from './pages/not-found'
import routes from "./router";
import "./style.css";

/** 函数式组件的路由 */
export function App(props) {
  const navigate = useNavigate();

  function navigateTo(path) {
    navigate(path);
  }

  return (
    <div className="app">
      <div className="header">
        <h3>header</h3>
        <div className="nav">
          {/* 
            Navigate 组件用于重定向，当条件满足时，会自动跳转到指定的路径。
            NavLink和Link的区别在于，NavLink会自动添加active类名，而Link不会。
          */}
          {/* 
            <NavLink to="/home" style={(isActive) => ({ color: isActive })}>首页</NavLink>
            <NavLink to="/about" style={(isActive) => ({ color: isActive ? 'red' : '' })}>关于</NavLink> 
          */}

          <Link to="/home">首页</Link>
          <Link to="/about">关于</Link>
          <Link to="/login">登录</Link>

          <button onClick={(e) => navigateTo("/category")}>分类</button>
          <button onClick={(e) => navigateTo("/order")}>订单</button>
        </div>
      </div>
      <div className="content">
        <h3>content 映射关系: path = Component</h3>
        {/* <Routes>
          <Route path="/" element={<Navigate to="/home" />} />
          <Route path="home" element={<Home />}>
            <Route path="/home/recommend" element={<HomeRecommend />} />
            <Route path="/home/ranking" element={<HomeRanking />} />
            <Route path="/home/songmenu" element={<HomeSongMenu />} />
          </Route>
          <Route path="/about" element={<About />} />
          <Route path="/detail/:id" element={<Detail />} />
          <Route path="/login" element={<Login />} />
          <Route path="/category" element={<Category />} />
          <Route path="/order" element={<Order />} />
          <Route path="*" element={<NotFound />} />
        </Routes> */}
        {useRoutes(routes)}
      </div>
      <div className="footer">
        <h3>footer</h3>
      </div>
    </div>
  );
}

export default App;

/** 类组件的路由 */
// export class App extends PureComponent {
//   navigateTo(path) {
//     const { navigate } = this.props.router
//     navigate(path)
//   }

//   render() {
//     return (
//       <div className='app'>
//         <div className='header'>
//           <h3>header</h3>
//           <div className="nav">
//             {/*
//               Navigate 组件用于重定向，当条件满足时，会自动跳转到指定的路径。
//               NavLink和Link的区别在于，NavLink会自动添加active类名，而Link不会。
//             */}
//             {/* <NavLink to="/home" style={(isActive) => ({ color: isActive })}>首页</NavLink>
//             <NavLink to="/about" style={(isActive) => ({ color: isActive ? 'red' : '' })}>关于</NavLink> */}

//             <Link to='/home'>首页</Link>
//             <Link to='/about'>关于</Link>
//             <Link to='/login'>登录</Link>

//             <button onClick={e => this.navigateTo('/category')}>分类</button>
//             <button onClick={e => this.navigateTo('/order')}>订单</button>
//           </div>
//         </div>
//         <div className="content">
//           <h3>content 映射关系: path = Component</h3>
//           <Routes>
//             <Route path="/" element={<Navigate to='/home'/>}/>
//             <Route path='home' element={<Home/>}>
//               <Route path='/home/recommend' element={<HomeRecommend/>}/>
//               <Route path='/home/ranking' element={<HomeRanking />}/>
//               <Route path='/home/songmenu' element={<HomeSongMenu />}/>
//             </Route>
//             <Route path='/about' element={<About />} />
//             <Route path='/detail/:id' element={<Detail />} />
//             <Route path='/login' element={<Login />} />
//             <Route path='/category' element={<Category />} />
//             <Route path='/order' element={<Order />} />
//             <Route path='*' element={<NotFound />} />
//           </Routes>
//         </div>
//         <div className='footer'>
//           <h3>footer</h3>
//         </div>
//       </div>
//     )
//   }
// }
// export default withRouter(App)
